Houdini me preguntaba como añadir unos banners de 125x125, hay varias formas de hacerlo y casi todas nos llevan al mismo resultado.
Voy a explicar como lo hice pero recomiendo visitar a Francisco y Rosa que explicaban y muy bien los pasos a seguir.
Los banners miden 125x125 a eso hay que sumarles el espacio que dejamos entre ellos y si añadimos algún borde para los estilos, no estaría mal probar antes en otro blog y una vez que tenemos las medidas ajustadas añadirlos al blog donde pensamos incorporar la publicidad.
Los podemos añadir directamente a la plantilla aunque yo prefiero utilizar un gadget por aquello de no recargar tanto y evitar posibles errores en las modificaciones.
Editamos un gadget de HTML y en su interior añadimos lo siguiente:

<div class="banner img">
<a href="#" title="Gem@ BLOG"><img style="margin:0px 5px 5px 0px;" alt="Gem@ BLOG" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/SgiUCDDtxdI/AAAAAAAAKdE/VStEZECsmn4/s320/J2E0353Z16.png"/></a>
<a href="#" title="Gem@ BLOG"><img style="margin:0px 0px 5px 0px;" alt="Gem@ BLOG" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/SgiUCDDtxdI/AAAAAAAAKdE/VStEZECsmn4/s320/J2E0353Z16.png"/></a>
<a href="#" title="Gem@ BLOG"><img style="margin:0px 5px 0px 0px;" alt="Gem@ BLOG" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/SgiUCDDtxdI/AAAAAAAAKdE/VStEZECsmn4/s320/J2E0353Z16.png"/></a>
<a href="#" title="Gem@ BLOG"><img style="margin:0px 0px 0px 0px;" alt="Gem@ BLOG" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/SgiUCDDtxdI/AAAAAAAAKdE/VStEZECsmn4/s320/J2E0353Z16.png"/></a>
</div>

Ya tenemos los banners en la sidebar, si tenemos necesidad de modificar el espacio entre ellos lo haremos en margin recordando que lo estamos modificando en el siguiente orden: arriba, derecha, debajo, izquierda.
» En title y alt sustituimos Gem@ BLOG por el nombre de la publicidad que añadimos.
» El asterisco # lo sustituimos por la url que enlazamos ya sea la url de la publicidad, una entrada donde informamos sobre los requisitos para contratar nuestro espacio o un enlace al correo para ponerse en contacto con nosotros.
» De ser lo últimos el enlace sería:
<a href="mailto:Tu dirección de correo aquí">
» Para el ejemplo he creado una imagen que podemos sustituir por cualquier otra.


» Para añadir un borde lo podemos hacer en plantilla  Edición de HTML, justo antes de ]]></b:skin>

.banner img{
width:125px;
padding:3px 2px ;
list-style:none;
display : block;
overflow:hidden;
float:left;
background:#fff ;
border:1px solid #ccc;
}


Houdini

Gracias Gem@ <3 ;)

Responder
Blogz

hola Gema!
Yo creo que yo agrego cosas en el sidebar "a lo bruto"...solo me voy a opciones HTML/javascript e incluyó la URL con la IMAGEN y me salen mis iconos tal y como los quiero. No se si es la forma correcta, pero me salen.

Responder
Pedrín

Hola Gema, se que no viene a cuento que lo ponga aqui pero esque no se donde ponerlo.

Me gusta el menu que tiene, y explica como hacerlo pero no le entiendo bien y me gustaria ver si tu podrias adaptar su explicacion para poner el menu en blogger. Muchas gracias

http://zonacerebral.com/2009/04/tutorial-para-crear-galeria-de-imagenes-slideshow.html

Responder
Pedrín

(Edito) Ya le he preguntado y han pasado 2 semanas y aún no me responde, es un menú muy bonito que seguro servirá a mucha gente. Gracias ;)

Responder
Henry

Que facil, creo que tambien funciona si pegamos el codigo en una entrada, para organizar algunas fotos. Como bien dira Denshou yo tambien he agregado muchas cosas a mi plantilla "a lo puro bruto" cuando lo profesional no funciona.

Responder
Anónimo

hola, soy nuevo en esto, encontre tu blog y ma servido de mucho, tengo 2 dudas, espero me las puedas despejar y gracias anticipado.
1) respecto a eliminar subrayados de los enlaces del blog, eh puesto los codigos k ay aki y desaparecio las rayas de los enlaces, pero cuando pongo las imagenes k reemplasan a "Entradas Antiguas" me sale la imagen rodeada de un borde diciendo k tiene el enlace.
como puedo kitar esos bordes a las imagenes??
2) mi segunda duda es con respecto a la desabilitacion del boton derecho del raton, el codigo es compatible con firefox? o solo fuinciona con Intener Explorer, pork lo coloco como dices y en vista previa no me da resultado, uso firefox.

Responder
Gem@

yz Espero te sea de ayuda Houdini :)
(En la entrada no enlacé tu blog porque el perfil no está disponible)

yz Denshou el sitio indicado para añadir cualquier código es en HML...
Cuando añadimos la url de una imagen nos muestra la imagen pero si deseamos que esa imagen sea también un enlace es necesario añadir el código html para que la imagen sea un enlace.
De cualquier forma si te queda como deseas no debes preocuparte ;)

yz Hola Pedrín ese menú está creado con jQuery, añadí alguno hace tiempo pero es un problema porque requiere crear un blog exclusivamente para el ejemplo ya que la librería que utiliza no es compatible con los que uso en mi blog.
Iván puede que no te respondiera porque ha estado de viaje y recién a regresado hace un par de días.
Haremos una cosa si vemos que está muy ocupado y en lo que queda se semana no responde yo hago el tutorial sobre ese menú, pero si responde me lo haces saber para que yo dedique el tiempo a tras cosas ¿ok? ;)

yz Hola Henry también sirve para eso, he buscado una entrada por si te fuera de más utilidad que esta.

yz Anónimo para decirte cómo puedes quitar ese borde de los iconos tengo que ver tu blog, hay plantillas que no son originales de Blogger y los estilos se muestran diferente.
Sobre el tema de inhabilitar el botón derecho sigue los pasos de esta entrada verás como funciona en Firefox :)

Responder
Pedrín

Gracias por responder Gema, pues esperaré hasta el viernes a ver si me responde y el viernes mismo te aviso si lo ha hecho o no. De todas formas gracias por ayudarnos de una forma desinteresada. Eres la mejor ;)

Responder
BIGARIATO

Para PEDRIN... No se si te servirá de algo que te diga que yo me lié con ese menu galería de imágenes y no me funcionaba. Al final, me tuve que descargar 2 plantillas y analizarlas para sacar de ellas lo que me interesaba (solo si entiendes de plantillas). Lo que tienen es que, aparte del script jQuery, hay unos cuantos script añadidos para que funcione. Estas plantillas son:
Zinmag Remedy, de Falcon Hive : http://falconhive.com/2009/02/zinmag-remedy-20/
y Scarlett, de Cahaya Biru :http://www.cahayabiru.com/2009/03/blogger-template-scarlett.html
Y lo adapté para mis blogs : http://bigariato1.blogspot.com/ y http://bigariato2.blogspot.com/
Saludos a tod@s.

Responder
Gem@

yz Gracias por la información BIGARIATO ;)

Responder
Blogz

Hola Gema...
he hecho todo pero no me salen los bordes, tengo las imagenes 125 x 125.

Responder
Pedrín

Hola Gema, aún no me has comentado, asi que por favor espero que tu lo puedes explicar aquí adaptado para blogger.

Gracias BIGARIATO

Responder
Gem@

yz Denshou indícame el blog porque no sé donde añadiste la publicidad ;)

yz Pedrín las explicaciones que da Iván son para Blogger es decir serían las mismas, estuve mirando los comentarios y no veo tus preguntas allí de todas formas envíame un mail para ponerme en contacto contigo y que me digas la url de los scripts ;)

Responder
Mauricio

Hola Gema,necesito tú ayuda por que en la sidebar los Gadget que tengo No los puedo organizar como yo quiero por que no me da (el espacio para ir organizandolos),no se por que no me deja,por favor dime que puede estar pasando.Gracias Gema y saludos.

Responder
Gem@

yz Mauricio ¿quieres decir que no puedes arrastrar los gadgets en la plantilla de diseño?
Si es eso inténtalo en plantilla de Edición de HTML busca:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' showaddelement='yes'>
A partir de ahí verás todos los gadget de la siguiente forma:
<b:widget id='HTML9' locked='false' title='' type='HTML'/>

Lo que debes hacer es ubicar cada línea en el orden que deseas que aparezca.
Espero sea eso :)

Responder
Anónimo

HOLA GEMA, QUISIERA SABER COMO ES POSIBLE INSTALAR EN MI BLOG (BLOGGER Y WORDPRESS)LA PLANTILLA LLAMADA: PRiNZ_WyntonMagazine_latest (O, WyntonMagazine)

EL PUNTO ES QUE LO HE INTENTADO Y LA VERDAD SE ME HACE COMPLICADO INSTALARLA. TE AGRADECERIA QUE ME LO PUDIERAS EXPLICAR PASO A PASO EN DETALLE, PORQUE CON OTRAS EXPLICACIONES NO LO HE PODIDO INSTALAR (LA VERDAD SE MUY POCO DE ESTO).

TE AGRADECERIA CUALQUIER AYUDA, AH Y ADEMAS DIME SI AL INSTALAR ESTA PLANTILLA TENGO ALGUN PROBLEMA CON LAS FUNCINES NORMALES O LE EXTRAS DE ALGUNOS DE ESTOS BLOGS QUE TE MENCIONE ANTES.

MUCHAS GRACIAS Y UN ABRAZO.

Responder
Gem@

yz Anónimo me dices que te explique con detalle algo que requiere más espacio de un comentario.
Ignoro como puedes añadir una planttilla en una plataforma que no es de Blogger, y si puede ocasionarte problemas después de añadida, eso sólo puede saberse trabajando sobre la plantilla.
Tampoco me dejas un enlace para ver la plantilla :O
Siento no poder ayudarte :(

Responder
Unknown

hola gem2! mis sidebars en http://paraninosconcabeza.blogspot.com son mucho más pequeñas, pero me gustaría intentar dividir una de ellas en cuadratines que no podrían ser de 125 x 125 ¿cómo lo puedo hacer? abracitos.

Responder
María José Moya

Querida Gema, aquí estoy, peleándome con los banners, que gracias a tí me está siendo muchísimo más fácil hacer este tema más o menos como tenía pensado.

Mis preguntas de ahora vienen porque he escogido de banner una imagen propia, por defecto, que he subido por medio de blogger (puedes verlo en mi blog de pruebas http://borrador-miestrellademar.blogspot.com/ en la sidebar, arriba del todo):

-¿Cómo puedo añadirles un bocadillo de texto?
-¿Cómo un enlace a un post que explique los términos del patrocinio? (creo que es, ¿cambiando la primera url que da blogger a la imagen, por el enlace del post al que desee redirigir?
-¿Cómo puedo saber las medidas que le he puesto al icono que señala el hueco para el patrocinador? (he adaptado las dimensiones del icono a las de la sidebar, para que quepan varios, pues deberán entender que depende de las dimensiones globales del blog, deberán tener un espacio proporcionalmente en las mismas medidas).

Espero que vuelvas de tus vacaciones con energías renovadas, aunque seguro que con mucha pereza de volver a la rutinilla. Un abrazo con ánimos para que empieces bien septiembre,

Responder
Gem@

yz lk no entiendo lo que quieres decir con dividirlas, si te refieres a añadir ese espacio para publicidad primeramente tendrías que decidir que medida tienen los cuadritos que deseas poner, en este caso son de 125 y en tu sidebar de 200px únicamente puedes poner uno. A no ser que añadas una widebar y de esa forma tendrías el doble de espacio:
http://gemablog-.blogspot.com/2008/08/widebar-simple.html

yz Hola Mariajo :)
- El bocadillo imagino que te refieres a la información que ofrece al pasar el cursor, se añade con los atributos:
alt - Indica un texto alternativo.
title - Muestra un texto en un tooltip cuando pasamos el ratón sobre la imagen.
Un ejemplo sería:
<a href="url de la página" target="_blank" rel="nofollow" title="título- (bocadillo)">
<img border="0" alt="avatar-publicidad" src="url de la imagen"/></a>

O simplemente sustituyendo en tu código donde tienes Gem@ BLOG por el título que deseas poner.

- Para enlazar a un post puedes hacerlo primeramente creando ese post, luego enlazando la imagen del cuadrito con la url de ese post.
La url del post la puedes conseguir haciendo click sobre el título del post, copias la url que aparece en ese momento en la barra del navegador y la pegas en el código de los cuadritos donde dice a href="#" sustituyendo la almohadilla por la url del post.
- Las medidas que tienen las imágenes de esos espacios las veo ahora mismo en el código que añadiste en el gadget de html los que están en la cabecera son de WIDTH: 99px; HEIGHT: 99px para la imagen grande y WIDTH: 83px; HEIGHT: 82px para la pequeña.
Los de la sidebar son de 125x125, para saber las medidas de una imagen podemos poner el restón sobre la imagen/botón derecho/propiedades de imagen ahí nos muestra toda la información de la imagen :)
En un principio no es que haya una medida establecida para los banners pero... siempre hay un pero, si que hay una medida digamos más usada y es la de 125x125.
Naturalmente tu blog es tuyo y decides que medida de banners aceptas es cuestión de probar.

Besotes grandes y suerte :)

Responder
Gem@

yz Mariajo donde dije "para saber las medidas de una imagen podemos poner el restón sobre la imagen" no era el restón sino ratón. Esta cabecita mía :D

Responder
Unknown

hola gem@, antes que nada GRACIAS, SEGUNDO: NO me llegan tus mails ni tus entradas a mi correo a pesar de que estoy suscrita y siempre me suscribo a tus entradas en las que dejo preguntas (siempre preguntas...). por eso pienso que no me contestas y resulta que sí me contestas!!!

a lo que me refería antes era a que quería poner en mi sidebar de 200, dos columnas de "anúnciate aquí" como lo tienes tú, pero reduciendo el tamaño del cuadratín. de otra forma me entra uno solo. pero como entiendo que lo standard es poner 125x125 he decidido ponerlo abajo de todo del blog. mirálos, no creo que sea muy atractivo para los anunciantes. ¿qué opinas? http://paraninosconcabeza.blogspot.com. abracitos.

Responder
Unknown

hola gem@, otra pregunta: ¿cómo hago para en lugar de que diga ANUNCIATE AQUÍ, DIGA otra cosa?

Responder
Unknown

hola gem@! ya lo explicas tú. es una imagen, URL, ¿vedad? tonta de mí.

Responder
Unknown

hola gem@!! pues, no. mira que he sustituido las dos veces gem@blog y me sale "anunciate aquí". ¿cómo puedo poner una imagen o texto que enlace con mi correo a la vez?

Responder
Gem@

yz lk no hay que confundir suscribirse a los comentarios con suscribirse al correo eh, para suscribirse a comentarios se hace desde el enlace que hay en la parte inferior del formulario "Suscripción por correo electrónico" para recibir las entradas hay que añadir el correo donde dice "Mis entradas en tu correo" (está en la sidebar) y es de FeedBurner.

- Los cuadritos están muy bien, en mi opinión quedan escondidos ya que son pocas las vistas que llegan al final del blog.
¿Si fuera el caso, pagarías por una publicidad que que van a añadir al final del blog?
Con la respuesta contestas a tu duda :)

- El texto que se muestra al pasar el ratón es el que añadimos con el atributo alt.
En tu blog veo que lo tienes con alt="Aquí tu publicidad" para cambiarlo simplemente cambia ese texto.

- En la entrada está explicado la forma de enlazar al correo:
"El asterisco # lo sustituimos por la url que enlazamos ya sea la url de la publicidad, una entrada donde informamos sobre los requisitos para contratar nuestro espacio o un enlace al correo para ponerse en contacto con nosotros.
» De ser lo últimos el enlace sería:
<a href="mailto:Tu dirección de correo aquí">

Responder
Unknown

hola gem2!! SI,SI, lo de las suscripciones lo hice bien desde el rpincipio. pero no me llegaban tus nuevas entradas, puede ser que tomase tiempo o algo.

en cuanto al texto AQUI TU ANUNCIO, fíjate que no pone eso sino ANUNCIATE AQUÍ. que es lo que pone en tus ejemplos. no sé por qué no "lee" lo que yo escribí...

en cuanto al lugar... tienes razón.. no es el mejor lugar. intentaré ver si consigo reuducir el tamaño de los cuadratines para que una columna de 200 me entren dos filas, que es lo mejor. si tengo más dudas, ya me paso por aquí!! (en plan rabindranath tagore.. jiji)
http://paraninosconcabeza.blogspot.com.

Responder
Unknown

hola gem@!! estoy intentando subir una imagen y una URL a uno de los cuadratines, pero no lo consigo. ¿dóne pongo el código de la imagen y dónde pongo la URL de la página a la que enlaza? Bueno, entiendo que la URL va en lugar del link a mi mail. pero no sé dónde tengo que poner la URL de la web. GRACIAASS

Responder
Unknown

GEMA@ ERES UNA GENIA, YA LO TENGO SOLUCIONADO!!

Responder
Gem@

yz ¡Que bien lk! ¿viste que no era tan complicado? :)

Responder
Unknown

gem@ you are the sun of my bog life (¿entiendes inglés, no?). besicos

Responder
Gem@

lk winter sun lk :D

Responder
Anónimo

me puedes decir como reducir su longitud a 100*130

Responder
Francisco

Gracias Gema me quedó buenisimo!!

Saludos!

Responder
Gem@

:: Me alegra mucho Francisco :D

Responder
Priamo

Hola Gema: Ya tengo la cuenta Pay Pal y pregunto me puedes facilitar el codigo del icono que has colocado debajo de los banners para efectuar los pagos y por ultimo como has logrado la direccion que al picar en el icono accedes a Pay Pal donaciones?
saludos

Responder
Gem@

:: Priamo el icono es una imagen, le das a guardar como con el botón derecho y la guardas en tu PC.
Si accedes a PayPal verás que hay una opción para vender desde el blog, y obtener botones o carritos de compra.
Cuando terminas te proporcionan un código, ese código es lo que hay que añadir a tu blog y ahí mismo ya viene enlazada esa página que ves pero a tu cuenta, el botón lo puedes cambiar simplemente sustituyendo una url por otra.

Responder
Priamo

Muchas gracias Gema ya lo he implementado pero tengo aún preguntas:
Me permites que más o menos utilizar tu redacción que figura en la entrada y que comenta las condiciones de publicacion de la publi?.

Otra pregunta: En esa entrada hablas de " los enlaces de publicidad continienen la etiqueta "nofollow" Puedes decirme que significa y que utilidad le das?

Cuando Pay Pal ha creado el codigo del boton me da 2 pestañas: Sitio Web (copio esto en el coidgo sidebar:OK) y otro que dice "Correo electronico" que no se para que sirve la direccion que ahí figura.

Gracias Gema,de verdad

Responder
Gem@

:: Priamo no hay problema que utilices la redacción.
-Sobre la etiqueta "nofollow" es la que se utiliza para que Google no tenga en cuenta esos enlaces y por consiguiente no los interprete como venta de enlaces ya que lo que se trata es de publicitar un sitio sin ánimos de impulsar ese sitio para obtener mejor posición en buscadores.
-Lo del "Correo electrónico" no he reparado en ese detalle, podría ser para añadirlo en nuestros correos como si fuera una firma e informar de este modo la forma de hacer un donativo. Ni idea :S

Responder
Priamo

Gracias por dejarme el texto.

Del correo te puedo dar una pista: Copié la direccion de "correo electronico" en el codigo del Gadget de la sidebar en concreto en la parte href="correo electronico" y al picar sobre el anuncio en la sidebar me redirigia a la hoja de la donacion,es decir, me redirige a la misma pagina que si hubiese puesto el codigo largo de "Sitio Web"
Saludos

Responder
FAR Ministerios

Rosaaaaaaaaaa ayudaaaaaaaaaa http://fulladven.blogspot.com/
agregue los banner pero el primero si va directo a la direccion que contrata el espacio pero el segundo sale primero la direccion de mi blog y luego la direccion que contrato el espacio y me sale esto:
No se encuentra la página.
Lo sentimos, la página que estabas buscando en el blog Full Adventistas no existe.

Please ayudame

Responder
MURRACIO

hola tengo algunas dudas te dejo mi correo para k me ayudes con mi dudas murracio100@hotmail.com enviame un mensaje si me kieres ayudar con mis dudas del manners
te lo agredeceria mucho si me ayudas

Responder
Gem@

:: MURRACIO puedes dejar tus dudas en cualquier entrada igual que dejaste este comentario porque no dispongo de tiempo para solucionar las dudas por el sistema que me indicas :O

Responder
Priamo

Gema hola de nuevo, tengo hace tiempo implementado este banner en mi sidebar con un efecto Hover como el que tienes en tu sidebar de publicidad. Me funciona solamente em IE pero en Firefox y Chrome No.
Podrias indicarme si tengo bien configurado los estilos.
Saludos y gracias

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top